/*
 * @Author: puhuaping
 * @Date: 2020-04-13 16:56:23
 */
<style lang="less" scoped>
.merchant-list {
  .btnBox {
    text-align: right;
  }
  .ivu-btn-small {
    padding: 1px 7px;
  }
  .ivu-btn {
    margin: 0 3px;
  }
}
.model-wrap .ivu-form-item {
  margin-bottom: 10px;
}
.flex-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <div class="merchant-list">
    <Card :bordered="true">
      <Form :label-width="60" inline style="margin-bottom:10px">
        <FormItem label="姓名">
          <Input
            type="text"
            clearable
            v-model="formSearch.userName"
            style="width: 180px"
            placeholder="请输入用户姓名"
          />
        </FormItem>
        <FormItem label="电话">
          <Input
            type="text"
            clearable
            v-model="formSearch.mobile"
            style="width: 180px"
            placeholder="请输入用户联系方式"
          />
        </FormItem>
        <FormItem label="操作人">
          <Input
            type="text"
            clearable
            v-model="formSearch.operatorName"
            style="width: 180px"
            placeholder="请输入操作管理员名称"
          />
        </FormItem>
        <Button type="primary" @click="handleSearch()">查询</Button>
        <Button type="success" @click="lookALL()">查看全部</Button>
      </Form>
      <!-- 表格 -->
      <div class="flex-table">
        <span></span>
        <Button type="primary" @click="showModel=true">爱豆充值</Button>
      </div>
      <tables
        ref="tables"
        :columns="columns"
        search-place="top"
        :searchBtn="false"
        v-model="tableData"
        :page="page"
        :handleChange="handleChange"
      />
    </Card>
    <Modal :mask-closable='false' v-model="showModel" title="爱豆充值" width="300" @on-visible-change="changeModel">
      <Form
        class="model-wrap"
        ref="formSubmitRef"
        :model="formSubmitData"
        :rules="formSubmitRule"
        label-position="left"
        :label-width="120"
      >
        <div v-if="step==1">
          <h3>用户信息</h3>
          <FormItem label :label-width="20" prop="mobile">
            <Input placeholder="请输入充值对象的联系方式" v-model="formSubmitData.mobile" />
          </FormItem>
        </div>
        <div v-if="step==2">
          <h3>用户信息</h3>
          <div style="margin-left:20px;">
            <FormItem label="用户ID">{{curRowData&&curRowData.id}}</FormItem>
            <FormItem label="姓   名">{{curRowData&&curRowData.nickname}}</FormItem>
            <FormItem label="联系方式">{{curRowData&&curRowData.mobile}}</FormItem>
          </div>
          <h3>爱豆信息</h3>
          <div style="margin-left:20px;">
            <FormItem label="爱豆余额">{{curRowData&&curRowData.idouBalance}}</FormItem>
          </div>
          <h3>添加数量</h3>
          <FormItem label :label-width="20" prop="amount">
            <Input placeholder="请输入数量" v-model="formSubmitData.amount" />
          </FormItem>
        </div>
      </Form>
      <div slot="footer">
        <Button type="default" @click="showModel=false">取消</Button>
        <Button v-if="step==2" type="default" @click="step=1">上一步</Button>
        <Button type="primary" @click="sureModel">{{step==1?'下一步':'确定'}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "@/components/tables/tables.vue";
import { requestData, getData } from "@/api/data";
import { setToken, getToken } from "@/libs/util";
import { isNumber } from "@/tool/validator";
import util from "@/tool/util.js";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const _this = this;
export default {
  name: "aidou",
  components: {
    Tables
  },
  data() {
    return {
      step: 1,
      showModel: false,
      page: {},
      tableData: [],
      formSubmitRule: {
        mobile: [
          {
            required: true,
            pattern: /^1([123456789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        amount: [
          {
            required: true,
            pattern: /^[1-9]*$/,
            message: "请输入大于0的整数",
            trigger: "blur"
          }
        ]
      },
      formSubmitData: {
        mobile: "",
        amount: ""
      },
      formSearch: {
        userName: "",
        mobile: "",
        operatorName: ""
      },
      columns: [
        {
          title: "用户ID",
          key: "userId",
          minWidth: 100,
          align: "center"
        },
        {
          title: "姓名",
          align: "center",
          key: "userName",
          minWidth: 100
        },
        {
          title: "联系方式",
          align: "center",
          key: "mobile",
          minWidth: 100
        },
        {
          title: "充值金额",
          align: "center",
          key: "amount",
          minWidth: 100
        },
        {
          title: "充值时间",
          align: "center",
          key: "createTime",
          minWidth: 100
        },
        {
          title: "操作人",
          align: "center",
          key: "operatorName",
          minWidth: 100
        },
        {
          title: " ",
          align: "center",
          key: ""
        }
      ]
    };
  },
  methods: {
    //model确定
    sureModel() {
      let _this = this;
      //  util.debounce(() => {
      let step = _this.step;
      _this.$refs.formSubmitRef.validate(valid => {
        if (valid) {
          let formSubmitData = _this.formSubmitData;
          if (step == 1) {
            let dataObj = {
              mobile: formSubmitData.mobile
            };
            requestData("/admin/user/findByMobile", "get", dataObj).then(res => {
              if (res.data.code == 0) {
                _this.step = 2;
                _this.curRowData = res.data.data;
              } else {
                this.$Message.error(res.data.msg);
              }
            });
          }else{
            let dataObj = {
              amount: formSubmitData.amount,
              userId:_this.curRowData.id
            };
            requestData("/admin/idouRecharge", "post", dataObj).then(res => {
              if (res.data.code == 0) {
                this.$Message.success('操作成功');
                this.showModel = false;
                this.getListData();
              } else {
                this.$Message.error(res.data.msg);
              }
            });
          }
        }
      });
      // },1000)
    },
    //模态框改变
    changeModel(e) {
      if (!e) {
        this.step = 1;
        this.curRowData = null;
      }
    },
    lookALL() {
      let formSearch = this.formSearch;
      for (let i in formSearch) {
        formSearch[i] = "";
      }
      this.formSearch = formSearch;
      this.indexPage = 1;
      this.getListData();
    },
    handleSearch() {
      this.indexPage = 1;
      this.getListData();
    },
    //获取分页
    handleChange(e) {
      this.indexPage = e;
      this.getListData();
    },
    getListData() {
      const dataObj = Object.assign(
        {
          page: this.indexPage,
          max: 10
        },
        this.formSearch
      );
      requestData("/admin/idouRecharge", "get", dataObj).then(res => {
        if (res.data.code == 0) {
          const { pageNumber, totalPage, totalRow } = res.data.page;
          this.page = {
            pageNumber: pageNumber,
            totalPage,
            totalRow: totalRow
          };
          this.tableData = res.data.data || [];
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    }
  },
  mounted() {
    this.getListData();
  }
};
</script>
